<template>
    <div class="login">
        <van-nav-bar
                title="登录"
                left-arrow
                :right-text="registerBtn"
                @click-left="$navBack('prePath')"
                @click-right="toSignUp">
        </van-nav-bar>
        <div class="logoWrap text-center-pk">
            <img :src="require('@img/app-logo.png')"
                 alt="logo"
                 class="logoImg">
            <div class="appName">屏客名榜</div>
        </div>
        <div class="loginWrap">
            <van-field
                    v-model.trim="phone"
                    placeholder="请输入手机号"
                    type="tel"
                    maxlength="11"
                    clearable
                    :left-icon="require('@img/login-user.png')"
                    class="formPhone formItem">
            </van-field>
            <van-field
                    v-model.trim="password"
                    placeholder="请输入密码"
                    :type="passwordType"
                    clearable
                    :left-icon="require('@img/login-password.png')"
                    class="formPassword formItem"
                    @click-left-icon="togglePassword">
                <van-button
                        slot="button"
                        size="small"
                        @click="toPasswordReset"
                        style="border: none; font-size: 14px">
                    忘记密码
                </van-button>
            </van-field>
            <van-button type="danger" block @click="login">登录</van-button>
            <div v-if="isWxBrowser">
                <van-divider class="loginDivider">第三方账号登录</van-divider>
                <div class="otherLogin">
                    <img :src="require('@img/login-wx.png')" alt="微信登录" @click="wxLogin">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /*
    * 微信登录只支持在微信内置浏览器打开
    * 普通浏览器只支持账号密码登录
    * 微信登录成功后，回调到wxlogin文件
    * */
    export default {
        name: 'login',
        components: {},

        data() {
            return {
                phone: "18584401743",
                password: "123456",
                passwordType : "password",
                isWxBrowser: this.$global.isWxBrowser,
            }
        },

        created() {

        },
        computed: {
            registerBtn() {
                return this.isWxBrowser ? "" : "注册"
            }
        },
        watch: {},
        methods: {
            toSignUp() {
                this.$router.push({path: "/register"})
            },
            async login() {
                // if(!this.$valid.phone(this.phone) || !this.$valid.password(this.password)) {
                //     return false
                // }
                this.$toast.loading({
                    message: "正在登录",
                    forbidClick: true
                });
                let dyncKey = await this.$util.getDynamicSecretKey();
                if(dyncKey) {
                    let password = this.$util.encrypt(this.password, dyncKey.tokenKey);
                    this.$api.login({
                        phone: this.phone,
                        password: password,
                        userKey: dyncKey.userKey
                    }).then( res => {
                        this.$toast.clear();
                        let result = this.$resData(res);
                        if(result) {
                            this.$util.saveToken({
                                token: result.token,
                                userId: result.userId
                            });
                            this.$store.commit("saveUserInfo", result);
                           this.$router.push({path: this.$store.state.prePath})
                        }
                    })
                }
            },
            //密码是否可见
            togglePassword() {
                this.passwordType = this.passwordType === "password" ? "text" : "password"
            },
            //微信登录
            wxLogin() {
                let prePath = this.$store.state.prePath ? this.$store.state.prePath : "/index";
                let urlObject = {
                    appid: "wx35ee42bc8a4faece",
                    //redirect_uri: "http://www.pkmb168.cn/wxLogin",
                    redirect_uri: `http://pkmb168.cn/pkmb-web-app.html?prePath=${prePath}`,
                    response_type: "code",
                    scope: "snsapi_userinfo",
                    state: "STATE#wechat_redirect",
                };
                let url = this.$util.encodeUrl(urlObject);
                //console.log(url)
                window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?' + url;
            },
            //忘记密码
            toPasswordReset() {
                if(this.$valid.phone(this.phone)) {
                    this.$router.push({path: "/passwordReset", query: {phone: this.phone}})
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .van-cell {
        padding: 8px 12px;
        box-shadow: 0 2px 6px 0 rgba(216, 40, 10, 0.2);
    }
    .login {
        .logoWrap {
            font-size: 16px;
            padding-top: 30px;
            padding-bottom: 35px;
        }

        .logoImg {
            width: 4em;
            vertical-align: bottom;
        }

        .appName {
            line-height: 36px;
            font-weight: 500;
        }

        .loginWrap {
            padding: 0 27px;

            .formItem {
                margin-bottom: 20px;
            }
            .formPassword {
                margin-bottom: 40px;
            }
        }
        .loginDivider {
            margin-top: 40px;
            margin-bottom: 20px;
        }
        .otherLogin {
            text-align: center;
            padding-bottom: 20px;
            img {
                width: 40px;
                height: 40px;
            }
        }
    }
</style>
